<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .register-card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .register-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
        }
        
        .register-header {
            border-radius: 1rem 1rem 0 0;
            padding: 1.5rem;
        }
        
        .register-icon {
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .form-control {
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
        }
        
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
        }
        
        .register-btn {
            border-radius: 0.5rem;
            font-weight: 600;
            padding: 0.75rem;
            transition: all 0.3s;
        }
        
        .register-btn:hover {
            transform: translateY(-2px);
        }

        .register-footer {
            border-radius: 0 0 1rem 1rem;
        }
        
        .strength-meter {
            height: 0.5rem;
            border-radius: 1rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <div th:replace="~{layout :: body(content=~{::content})}">
        <div th:fragment="content">
            <div class="row justify-content-center">
                <div class="col-xl-5 col-lg-6 col-md-8">
                    <div class="text-center mb-4">
                        <h1 class="h2 fw-bold">加入我们</h1>
                        <p class="text-muted">创建您的账户并开始使用所有功能</p>
                    </div>
                    
                    <div class="card register-card mb-4">
                        <div class="card-header bg-primary text-white text-center py-4 register-header">
                            <div class="register-icon mb-3">
                                <i class="bi bi-person-plus" style="font-size: 3.5rem;"></i>
                            </div>
                            <h2 class="fw-bold m-0">创建账号</h2>
                        </div>
                        <div class="card-body p-5">
                            <form th:action="@{/register}" method="post">
                                <div class="mb-4">
                                    <label for="username" class="form-label fw-bold">用户名</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="bi bi-person text-primary"></i>
                                        </span>
                                        <input type="text" class="form-control border-0 bg-light" id="username" name="username" placeholder="请选择用户名" required autofocus>
                                    </div>
                                    <small class="text-muted">用户名长度至少5个字符，只能包含字母、数字和下划线</small>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="email" class="form-label fw-bold">电子邮件</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="bi bi-envelope text-primary"></i>
                                        </span>
                                        <input type="email" class="form-control border-0 bg-light" id="email" name="email" placeholder="请输入邮箱地址" required>
                                    </div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="password" class="form-label fw-bold">密码</label>
                                    <div class="input-group mb-1">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="bi bi-key text-primary"></i>
                                        </span>
                                        <input type="password" class="form-control border-0 bg-light" id="password" name="password" placeholder="请设置密码" required>
                                        <button class="btn bg-light border-0" type="button" id="togglePassword">
                                            <i class="bi bi-eye text-muted"></i>
                                        </button>
                                    </div>
                                    
                                    <div class="strength-meter progress bg-light mt-2">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 0%" id="passwordStrength"></div>
                                    </div>
                                    <small class="text-muted d-block mt-2">密码强度：<span id="strengthText">弱</span></small>
                                    
                                    <div class="mt-2 small">
                                        <div class="d-flex align-items-center mb-1">
                                            <i class="bi bi-check-circle me-2" id="lengthCheck"></i>
                                            <span>密码长度至少8个字符</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-1">
                                            <i class="bi bi-check-circle me-2" id="upperCheck"></i>
                                            <span>包含大写字母</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-1">
                                            <i class="bi bi-check-circle me-2" id="numberCheck"></i>
                                            <span>包含数字</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="bi bi-check-circle me-2" id="specialCheck"></i>
                                            <span>包含特殊字符</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-4 form-check">
                                    <input type="checkbox" class="form-check-input" id="agree" name="agree" required>
                                    <label class="form-check-label" for="agree">
                                        我已阅读并同意<a href="#" class="text-primary">服务条款</a>和<a href="#" class="text-primary">隐私政策</a>
                                    </label>
                                </div>
                                
                                <div class="d-grid gap-2 mb-4">
                                    <button type="submit" class="btn btn-primary btn-lg register-btn">
                                        <i class="bi bi-person-plus me-2"></i>创建账号
                                    </button>
                                </div>
                                
                                <div class="text-center">
                                    <span class="text-muted">或使用社交账号注册</span>
                                    <div class="d-flex justify-content-center mt-3 gap-3">
                                        <a href="#" class="btn btn-outline-secondary rounded-circle">
                                            <i class="bi bi-google"></i>
                                        </a>
                                        <a href="#" class="btn btn-outline-secondary rounded-circle">
                                            <i class="bi bi-facebook"></i>
                                        </a>
                                        <a href="#" class="btn btn-outline-secondary rounded-circle">
                                            <i class="bi bi-twitter"></i>
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer bg-white text-center py-4 register-footer">
                            <div class="mb-1">已有账号？ <a th:href="@{/login}" class="fw-bold text-primary text-decoration-none">立即登录</a></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const togglePassword = document.getElementById('togglePassword');
                    const password = document.getElementById('password');
                    const strengthMeter = document.getElementById('passwordStrength');
                    const strengthText = document.getElementById('strengthText');
                    const lengthCheck = document.getElementById('lengthCheck');
                    const upperCheck = document.getElementById('upperCheck');
                    const numberCheck = document.getElementById('numberCheck');
                    const specialCheck = document.getElementById('specialCheck');
                    
                    // 切换密码可见性
                    togglePassword.addEventListener('click', function() {
                        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                        password.setAttribute('type', type);
                        this.querySelector('i').classList.toggle('bi-eye');
                        this.querySelector('i').classList.toggle('bi-eye-slash');
                    });
                    
                    // 密码强度检测
                    password.addEventListener('input', function() {
                        const val = this.value;
                        let strength = 0;
                        let color = 'danger';
                        
                        // 检查长度
                        if (val.length >= 8) {
                            strength += 25;
                            lengthCheck.classList.remove('text-muted');
                            lengthCheck.classList.add('text-success');
                        } else {
                            lengthCheck.classList.remove('text-success');
                            lengthCheck.classList.add('text-muted');
                        }
                        
                        // 检查大写字母
                        if (/[A-Z]/.test(val)) {
                            strength += 25;
                            upperCheck.classList.remove('text-muted');
                            upperCheck.classList.add('text-success');
                        } else {
                            upperCheck.classList.remove('text-success');
                            upperCheck.classList.add('text-muted');
                        }
                        
                        // 检查数字
                        if (/[0-9]/.test(val)) {
                            strength += 25;
                            numberCheck.classList.remove('text-muted');
                            numberCheck.classList.add('text-success');
                        } else {
                            numberCheck.classList.remove('text-success');
                            numberCheck.classList.add('text-muted');
                        }
                        
                        // 检查特殊字符
                        if (/[^A-Za-z0-9]/.test(val)) {
                            strength += 25;
                            specialCheck.classList.remove('text-muted');
                            specialCheck.classList.add('text-success');
                        } else {
                            specialCheck.classList.remove('text-success');
                            specialCheck.classList.add('text-muted');
                        }
                        
                        // 设置强度文本和颜色
                        if (strength >= 75) {
                            strengthText.textContent = '强';
                            color = 'success';
                        } else if (strength >= 50) {
                            strengthText.textContent = '中';
                            color = 'warning';
                        } else if (strength >= 25) {
                            strengthText.textContent = '弱';
                            color = 'danger';
                        } else {
                            strengthText.textContent = '很弱';
                            color = 'danger';
                        }
                        
                        // 更新进度条
                        strengthMeter.style.width = strength + '%';
                        strengthMeter.classList.remove('bg-danger', 'bg-warning', 'bg-success');
                        strengthMeter.classList.add('bg-' + color);
                    });
                });
            </script>
        </div>
    </div>
</body>
</html> 